<template>
	<view class="content">
	<u-collapse :head-style="headStyle">
		<view class="item_list"  v-for="(item, index) in itemList" :key="index">
			<u-collapse-item :title="item.head" :open="item.open">
				<view class="body_item">
					<view class="plan_name">
						<view class="">
							计划名称：3月保养计划
						</view>
						<view class="n_type">
							<image src="../../../static/device/zhengchang.svg" mode=""></image>
							<text>正常</text>
						</view>
					</view>
					<view class="plan_con">
						<view class="">
							所属部门：<text>设备部</text>
						</view>
						<view class="">
							执行时间：<text>2021/11/21 12:00:00 至 2021/11/21 12:00:00</text>
						</view>
					</view>
					<view class="plan_user">
						<view class="" style="margin-bottom: 20rpx;">
							<view class="u_img">
								<image src="../../../static/device/yonghu.svg" mode=""></image>
							</view>
								责任人：
								<text>节度使</text>
						</view>
						<view class="">
							<view class="u_img">
								<image src="../../../static/device/xunjianzhouqi.svg" mode=""></image>
							</view>
								巡检周期：
								<text>1周</text>
						</view>
					</view>
				</view>
			</u-collapse-item>
		</view>
	</u-collapse>
	</view>
</template>

<script>
    export default {
        components: {
            
        },
		data() {
			return {
				itemList: [{
					head: "计划编号：KDJFA202108912383741",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					disabled: true
				},{
					head: "计划编号：KDJFA202108912383741",
					body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					open: true,
				},{
					head: "计划编号：KDJFA202108912383741",
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: true,
				}],
				headStyle:{
					marginTop: '30rpx',
					color:'#0CCB82',
					fontSize:'24rpx',
					padding: '30rpx 30rpx 30rpx 70rpx',
					background: 'url(../../../static/device/jihua.svg) no-repeat',
					backgroundSize: '26rpx 26rpx',
					backgroundPositionY: '30rpx',
					backgroundPositionX: '30rpx',
					
				}
			};
		},
		mounted() {},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		.item_list{
			@include box_shadow;
			.body_item{
				display: flex;
				flex-direction: column;
				padding: 30rpx 30rpx 60rpx 30rpx;
				box-sizing:border-box;
				.plan_name{
					display: flex;
					justify-content: space-between;
					padding: 30rpx;
					background: rgba($color: #27B66A, $alpha: 0.16);
					border-left: 10rpx solid #27B66A;
					font-size: 28rpx;
					color: #666666;
					image{
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
					.n_type{
						display: flex;
						align-items: center;
					}
				}
				.plan_con{
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 24rpx;
					color: #999999;
					padding-bottom: 44rpx;
					border-bottom: 2rpx solid #EFEFF4;
					margin: 20rpx 0;
					text{
						color: #101010;
					}
					view:nth-child(1){
						margin-bottom: 14rpx;
					}
				}
				.plan_user{
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 24rpx;
					color: #999999;
					view{
						display: flex;
						align-items: center;
					}
					text{
						color: #101010;
					}
					.u_img{
						width: 40rpx;
						height: 40rpx;
						background: #0581FD;
						border-radius: 20rpx;
						margin-right: 20rpx;
						display: flex;
						justify-content: center;
						padding: 8rpx;
					}
					image{
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}
	}
</style>
